<template>
    <div class="product-detail">
        <div class="content">
            <div class="fe-video">
                <video
                    ref="videoRef" :src="videoUrl" preload="metadata" controls webkit-playsinline="true"
                    x5-playsinline="x5-playsinline" playsinline="true"
                ></video>
            </div>
            <div class="label-selection">
                <div class="imgs">
                    <img :src="imgUrl" alt="" class="img" width="100%;">
                </div>
            </div>
        </div>
        <div class="bottom" :class="getBottomClass()">
            <div class="fe-btns">
                <div class="left" @click="isShowShareTypePopup = true">
                    分享
                </div>
                <div class="right" @click="toProductPutInPage">
                    投放演示
                </div>
            </div>
        </div>
    </div>

    <share-type-popup :is-show="isShowShareTypePopup" @close="isShowShareTypePopup = false" @confirm="onConfirmShareType" />
    <share-popup :is-show="isShowSharePopup" :share-data="shareData" @close="isShowSharePopup = false" />
</template>

<script lang="ts" setup>
import { PropType, ref, toRefs } from 'vue';
import { ProductIntroduceModel } from './detail.module';
import SharePopup from '../SharePopup/index.vue';
import ShareTypePopup from '../ShareTypePopup/index.vue';
import { useRouter } from 'vue-router';
import { getImageUrl } from '@/utils/index';
import { shareDataModel } from '@/views/products/brandBreakout/breakout.module';
import { getProjectId } from '@/api/common';
import { store } from '@/store';
import { isIos } from '@/utils';

const props = defineProps({
    detail: {
        type: Object as PropType<ProductIntroduceModel>,
        require: true,
        default: () => ({}),
    },
});



const { detail } = toRefs(props);
const router = useRouter();
const isShowSharePopup = ref(false);
const isShowShareTypePopup = ref(false);
const shareType = ref<string>('');
const imgUrl = getImageUrl(detail.value.imgUrl);

// preload="metadata" + videoUrl加#t=0.001 指定帧作为预览图
const videoUrl = `${detail.value.videoUrl}#t=0.001`;

const shareData = ref<shareDataModel>(

);

const toProductPutInPage = async () => {
    const res = await getProjectId({ publishStrategy: detail.value.type });
    if (res) {
        store.commit('app/setHomeProjectId', res);
    }

    await router.push({
        name: detail.value.routerName,
        query: {
            t: +Date.now()
        }
    });
};
const initShareData = () => {
    shareData.value = {
        provider: '',
        type: 0,
        title: detail.value.title,
        href: shareType.value === 'video' ? detail.value.videoUrl : imgUrl,
        imgUrl: shareType.value === 'video' ? detail.value.videoUrl : imgUrl,
    };
};
const onConfirmShareType = (type: string) => {
    isShowShareTypePopup.value = false;
    shareType.value = type;
    isShowSharePopup.value = true;
    initShareData();
};

function getBottomClass() {
    return isIos() ? 'is-ios' : '';
}

</script>

<style lang="scss" scoped>
.product-detail {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;

    .content {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .fe-video {
        background: #000000;

        video {
            height: 211px;
            width: 375px;
            max-width: 100%;
        }
    }

    .label-selection {
        flex: 1;
        margin-top: 10px;
        background: #ffffff;
        border-radius: 10px 10px 0 0;
        // z-index: 111;
        padding: 15px 0 0;
        margin-bottom: 12px;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: auto;

        .imgs {
            flex: 1;
            overflow: auto;
        }

        .img {
            width: 100%;
        }
    }

    .product-info {
        margin-top: 13px;
        flex: 1;
        padding: 16px 12px;
        background: #ffffff;

        .info {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 0.5px solid #f4f4f4;
            border-radius: 4px;
            padding: 16px 16px 12px 12px;

            .left {
                display: flex;
                align-items: center;

                img {
                    width: 30px;
                    height: 37px;
                    margin-right: 12px;
                }

                span {
                    display: inline-block;
                    height: 20px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }
            }

            .right {
                display: flex;

                div:first-child {
                    margin-right: 20px;
                }

                p {
                    height: 16px;
                    font-weight: 400;
                    font-size: 11px;
                    color: #848484;
                }

                img {
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }

    .bottom {
        background: #ffffff;
        border-top: 0.5px solid #f4f4f4;
        padding-top: 8px;

        // padding-bottom: 33px;
        .fe-btns {
            margin-bottom: 8px;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 12px;
        }

        .left {
            width: 120px;
            height: 38px;
            line-height: 38px;
            background: #ffffff;
            border: 0.5px solid #e60044;
            border-radius: 6px;
            // font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #e60044;
            text-align: center;
            margin-right: 12px;
        }

        .right {
            width: calc(100% - 120px);
            height: 38px;
            line-height: 38px;
            background: #e60044;
            border: 0.5px solid #e60044;
            border-radius: 6px;
            // font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
        }
    }

    .is-ios {
        padding-bottom: contain(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
